import React from 'react'
import { Table, Pagination } from 'antd'
import '../batchRecord/search.css'
import styles from '@/components/batchRecord/table.scss'

const { Column } = Table

const MonthSendStatiticsTable = (props) => {
  const { 
    pageNum,
    pageSize,
    loading,
    total,
    data,
    onChangePagination,
  } = props

  return (
    <div>
      <Table 
        dataSource={data}
        loading={loading}
        pagination={false}
        rowKey={(_, index) => index}
      >
        <Column title="时间" dataIndex="month" align="center" />
        <Column title="发送总数" dataIndex="msgCount" align="center" />
        <Column title="成功数" dataIndex="successCount" align="center"/>
        <Column title="失败数" dataIndex="failureCount" align="center" />
        <Column title="未知数" dataIndex="unknownCount" align="center" />
        <Column title="成功率" dataIndex="successRate" align="center" />
      </Table>
      {!!total && <div className={styles["pagination-container"]}>
        <Pagination 
          className={styles["pagination"]} 
          showQuickJumper 
          showTotal={(total, range) => `共${total}条`} 
          pageSize={pageSize} 
          current={pageNum} 
          total={total} 
          onChange={onChangePagination} 
        />
      </div>}
    </div>
  )
}

export default MonthSendStatiticsTable